import styled from 'styled-components'
export const SongListWrapper = styled.div`
`
export const NavWrapper = styled.div`
  display:flex;
  margin-top:30px;
  border-bottom:2px solid #C20C0C;
  .title{
    font-size:20px;
    color:#333;
  }
  .count{
    margin-top:8px;
    color:#666;
    margin-left:20px;
  }
  .play{
    margin-top:8px;
    margin-left:350px;
    .playcount{
      color:#C20C0C;
      font-weight:600;
    }
  }
`
export const ListWrapper = styled.div`
    table {
      width: 100%;
      border: 1px solid #d9d9d9;
      thead {
        th {
          height: 34px;
          line-height: 34px;
          background-image: url(${require("@/assets/img/sprite_table.png")});
          color: #666;
          border: 1px solid #ddd;
          border-width: 0 0 1px 1px;
          padding-left: 10px;
        }
        .ranking {
          width: 78px;
          border-left: none;
        }
        .duration {
          width: 91px;
        }
        .singer {
          width: 90px;
        }
        .album{
          width:127px;
        }
      }
      tbody {
        td {
          padding: 6px 10px;
        }
        tr:nth-child(2n) {
          background-color: #fff;
        }
        tr:nth-child(2n+1) {
          background-color: #f7f7f7;
        }
        .rank-num {
          display: flex;
          .num {
            width: 25px;
            height: 18px;
            text-align: center;
            color: #999;
          }
          .play {
            width: 17px;
            height: 17px;
            background-position: 0 -103px;
            cursor:pointer;
            margin-left:10px;
          }  
        }
        .song-name {
          display: flex;
          align-items: center;
          img {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            cursor:pointer;
          }
          .name {
            margin-left: 10px;
            cursor:pointer;
          }
        }
        .dt {
          .operate {
            display: flex;
            align-items: center;
            display: none;
            width: 82px;

          .btn {
           width: 17px;
           height: 17px;
           line-height:17px;
           margin-left: 8px;
           cursor: pointer;
          }

          .play {
           background-position: -267px -268px;
         }

          .addto {
            position: relative;
            top: 2px;
            background-position: 0 -700px;
          }

          .favor {
            background-position: -297px -268px;
          }
        }
        &:hover {
          .operate {
            display: block;
          }
          .dt_content{
            display: none;
          }
        }
      }
      }
    }
`